<template>
  <div class="system-button">
    <slot />
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.system-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
  height: 32px;
  border: 2px solid transparent;
  box-sizing: border-box;
  color: var(--base-font);
  background-color: var(--system-button);

  &:hover {
    border-color: var(--system-button-hover-border);
  }
}
</style>
